import React, { Component } from "react";

import { Form, Input, Button, message } from "antd";
import { UserOutlined, LockOutlined } from "@ant-design/icons";
import { reqLogin } from "../../api";
import "./login.less";
import memoryUtils from "../../utils/memoryUtils";
import storageUtils from "../../utils/storageUtils";
import { Redirect } from "react-router-dom";

class login extends Component {
  onFinish = async (event) => {
    // console.log( event );
    const { username, password } = event;
    const res = await reqLogin(username, password);
    console.log(res);
	  if ( res.data.status === 0 ) {
		  const user = res.data.data;
		  storageUtils.saveUser( user );
		  memoryUtils.user = user;
		  this.props.history.replace( '/' );
		  message.success( '登陆成功' );
	  } else { 
		  message.error('登陆失败')
	  }
    //   .then((response) => {
    //     // console.log( '成功', response.data );
    //     const res = response.data;
    //     if (res.status === 0) {
    //       //登录成功(不需要回退回来，用replace)

    //       const user = res.data;
    //       console.log(user);

    // 		storageUtils.saveUser( user );
    // 		memoryUtils.user = user;
    //       this.props.history.replace("/");
    //       message.success("登录成功");
    //     } else {
    //       //登录失败
    //       message.error(res.msg);
    //     }
    //   })
    //   .catch((error) => {
    //     console.log("失败");
    //   });
  };
  render() {
    //判断用户是否登录
    const user = memoryUtils.user;
    if (user._id) {
      return <Redirect to="/admin" />;
    }
    return (
      <div className="login">
        <header className="login-header">
          <h1>后台管理系统</h1>
        </header>
        <section className="login-content">
          <h2>用户登录</h2>
          <Form
            name="normal_login"
            className="login-form"
            initialValues={{ remember: true }}
            // onSubmit={ this.handleSubmit}
            onFinish={this.onFinish}
          >
            <Form.Item
              name="username"
              rules={[
                { required: true, message: "用户名必须输入" },
                { min: 4, message: "用户名不能少于4位" },
                { max: 12, message: "用户名不能多于12位" },
                {
                  pattern: /^[a-zA-Z0-9_]+$/,
                  message: "用户名必须是数字字母下划线组成",
                },
              ]}
            >
              <Input
                //icon图标
                prefix={<UserOutlined className="site-form-item-icon" />}
                placeholder="Username"
              />
            </Form.Item>
            <Form.Item
              name="password"
              rules={[
                { required: true, message: "密码不允许为空" },
                { min: 4, message: "密码不能少于4位" },
                { max: 20, message: "密码不能多于20位" },
                {
                  pattern: /^[a-zA-Z0-9_]+$/,
                  message: "密码必须是数字字母下划线组成",
                },
              ]}
            >
              <Input
                prefix={<LockOutlined className="site-form-item-icon" />}
                type="password"
                placeholder="Password"
              />
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                登陆
              </Button>
            </Form.Item>
          </Form>
        </section>
      </div>
    );
  }
}

export default login;
